import moment from 'moment'
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'

import { riverApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT } from '@/constants'

export default defineComponent({
  name: 'RvReceiptSubDetailList',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const route = useRoute()

    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        columnConfig: {
          minWidth: 150,
          resizable: true
        },
        columns: [
          {
            type: 'seq',
            width: 50,
            title: '序号'
          },
          {
            title: '回单流水号',
            field: 'serialNo',
            width: 200
          },
          {
            title: '是否匹配成功',
            field: 'matchSettleNo',
            width: 200
          },
          {
            title: '金额',
            field: 'amount',
            width: 100,
            formatter: ({ cellValue }) => {
              return '￥' + cellValue
            }
          },
          {
            title: '打款日期',
            field: 'payDate'
          },
          {
            title: '回单验证码',
            field: 'verifyCode',
            width: 170
          },
          {
            title: '付款人名称',
            field: 'payName'
          },
          {
            title: '付款人开户行',
            field: 'payBank'
          },
          {
            title: '付款人账号',
            field: 'payAccount',
            width: 170
          },
          {
            title: '收款人名称',
            field: 'receiveName'
          },
          {
            title: '收款人开户行',
            field: 'receiveBank'
          },
          {
            title: '收款人账号',
            field: 'receiveAccount',
            width: 170
          },
          {
            title: '用途摘要',
            field: 'summary'
          },
          {
            title: '交易流水号',
            field: 'tradeNum'
          }
        ],

        proxyConfig: {
          form: true,
          ajax: {
            query: async () => {
              const data = await riverApi.getReceiptSubDetailList(
                route.query.id
              )
              return data
            }
          }
        }
      }
    } as ProTableProps)

    return {
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div>
        <ProTable ref="tableRef" {...this.tableConfig} />
      </div>
    )
  }
})
